<template>
    <div>
      <div>
        <el-button @click="dialogFormVisible = true">打开</el-button>
      </div>
      <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
        :render-content="renderContent"
      >
      </el-tree>
    </div>
</template>

<script>
export default {
  name: 'index',
  components: {
  },
  mounted () {
    const levelNames = document.getElementsByClassName('foo')
    for (let i = 0; i < levelNames.length; i++) {
      levelNames[i].style.fontSize = '25px'
    }
  },
  data () {
    return {
      from: {
        arr: [
          {
            info: {
              options: [{ name: '用户名', val: 1 }, { name: '部门', val: 2 }, { name: '时间', val: 3 }, {name: '电话', val: 4}],
              val: '',
              rule: 'info'
            },
            count: {
              options: [{ name: '大于', val: 1 }, { name: '等于', val: 2 }, { name: '小于', val: 3 }],
              val: '',
              rule: 'count'
            },
            date: {
              val: '',
              rule: 'date'
            },
            input: {
              val: '',
              rule: 'input'
            }
          }
        ]
      },
      data: [{
        id: 0,
        label: '设备列表',
        children: [
          {
            id: 1,
            label: '主变',
            children: [{
              id: 4,
              label: '1号主变'
            }, {
              id: 5,
              label: '2号主变'
            }]
          }, {
            id: 2,
            label: '开关间隔',
            children: [{
              id: 6,
              label: '110kV响东991开关间隔'
            }, {
              id: 7,
              label: '1号主变110kV侧701开关间隔'
            }, {
              id: 8,
              label: '2号主变110kV侧701开关间隔'
            }, {
              id: 9,
              label: '110kV响东992开关间隔'
            }
            ]
          }, {
            id: 3,
            label: '压变间隔',
            children: [{
              id: 10,
              label: '110kV | 断母线压变间隔'
            }, {
              id: 11,
              label: '110kV | i断母线压变间隔'
            }]
          }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    renderContent (h, { node, data, store }) {
      let classname = ''
      if (node.level === 1 || node.level === 2) {
        classname = 'foo'
      }
      return h(
        'div',
        {
          class: classname
        },
        node.label
      )
    }
  }
}
</script>

<style scoped>

</style>
